<template>
    <div style="margin-bottom: 24px;">
        <TitleTips title="养护范围">
            <template slot="button">
                <BaseButton style="position: absolute; right: 10px;" plain :disabled="tableList.length >= 20" @click="handleAdd">新增路段</BaseButton>
            </template>
        </TitleTips>
        <BaseTable :columns="columns" :data="tableList">
            <template #header="{ scope: { column } }">
                <span> <i class="required-start">*</i> {{ column.label }} </span>
            </template>

            <template #highway="{ scope: { row } }">
                <RoadSelect
                    :value.sync="row.highwayCode"
                    :name.sync="row.highwayName"
                    :stake.sync="row.stake"
                    clearable
                    @change="highwayChange(row)"
                />
                <div v-show="row.highwayCode" class="stake-tip" style="left: 24px">桩号范围：{{ row.stake }}</div>
            </template>
            <template #scope="{ scope: { row } }">                
                <el-select
                v-model="row.scope"
                :disabled="!row.highwayCode"
                :placeholder="row.highwayCode ? '请选择' : '请选择公路'"
                clearable
                @change="scopeChange(row)"
                >
                    <el-option
                        v-for="item in rangeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </template>
            <template #stake="{ scope: { row } }">
                <el-input
                    v-model.trim="row.stakeStart1"
                    :disabled="row.scope && row.scope===1"
                    placeholder="请输入"
                    maxlength="3"
                    style="width: 126px;"
                    @change="row.stakeStart2 = ''"
                >
                    <div slot="prepend" class="input-unit">K</div>
                </el-input>
                <div v-if="row.stakeIsValid === false" class="stake-tip" style="left: 24px; color: #e50834;">桩号范围不能超出公路全线范围</div>
                <span> + </span>
                <el-input
                    v-model.trim="row.stakeStart2"
                    :disabled="!row.stakeStart1 || row.scope===1"
                    maxlength="3"
                    style="width: 80px;"
                    placeholder="请输入"
                />
                <span> ~ </span>
                <el-input
                    v-model.trim="row.stakeEnd1"
                    :disabled="!row.stakeStart2 || row.scope===1"
                    placeholder="请输入"
                    maxlength="3"
                    style="width: 126px;"
                    @change="row.stakeEnd2 = ''"
                >
                    <div slot="prepend" class="input-unit">K</div>
                </el-input>
                <span> + </span>
                <el-input
                    v-model.trim="row.stakeEnd2"
                    :disabled="!row.stakeEnd1 || row.scope===1"
                    maxlength="3"
                    style="width: 80px;"
                    placeholder="请输入"
                    @blur="stakeChange(row)"
                />
            </template>
            
            <template #roadSection="{ scope: { row } }">
                <el-input v-model.trim="row.roadSection" clearable maxlength="20" show-word-limit placeholder="请输入" class="spe-input" />
            </template>
            <template #handle="{ scope: { $index } }">
                <BaseButton type="text" :disabled="tableList.length === 1" color="danger" @click="handleDelete($index)">删除</BaseButton>
            </template>
        </BaseTable>
    </div>
</template>

<script>
import reconfirm from '@/utils/reconfirm'
import { RoadRangeOptions } from '@/views/maintenance-decision/constants'

export default {
    name: 'CulvertBridgeTable',
    props: {
        data: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            rangeOptions: RoadRangeOptions,
            tableList: [
                {
                    highwayCode: '',
                    highwayName: '',
                    scope: '',
                    roadSection: '',
                    stake: '',
                    stakeStart1: '',
                    stakeStart2: '',
                    stakeEnd1: '',
                    stakeEnd2: '',
                    stakeIsValid: ''
                }
            ],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '70',
                        type: 'index'
                    }
                },
                {
                    slot: 'highway',
                    headerSlot: 'header',
                    attrs: {
                        prop: 'highwayCode',
                        label: '公路名称',
                        'min-width': '210'
                    }
                },
                {
                    slot: 'scope',
                    headerSlot: 'header',
                    attrs: {
                        prop: 'scope',
                        label: '范围',
                        width: '144'
                    }
                },
                {
                    slot: 'roadSection',
                    attrs: {
                        prop: 'roadSection',
                        label: '路段范围描述',
                        'min-width': '180'
                    }
                },
                {
                    slot: 'stake',
                    headerSlot: 'header',
                    attrs: {
                        prop: 'stake',
                        label: '桩号范围',
                        width: '500'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140'
                    }
                }
            ])
        }
    },
    watch: {
        data(newValue) {
            if (newValue.length > 0) {
                this.tableList = newValue.map(item => {
                    const [stakeStart1 = '', stakeStart2 = ''] = item.startStakeNo ? item.startStakeNo.replace('K', '').split('+') : []
                    const [stakeEnd1 = '', stakeEnd2 = ''] = item.endStakeNo ? item.endStakeNo.replace('K', '').split('+') : []
                    return {
                        ...item,
                        stakeStart1,
                        stakeStart2,
                        stakeEnd1,
                        stakeEnd2,
                        stakeIsValid: true
                    }
                })
            }
        }
    },
    methods: {
        highwayChange(row) {
            console.log(row)
            row.scope = ''
            this.scopeChange(row)
        },
        scopeChange(row) {
            if (row.scope === 1) {
                // K493+790~K533+400 拆成数组
                const [stakeStart, stakeEnd] = row.stake.split('~')
                const [stakeStart1, stakeStart2] = stakeStart.replace('K', '').split('+')
                const [stakeEnd1, stakeEnd2] = stakeEnd.replace('K', '').split('+')
                row.stakeStart1 = stakeStart1
                row.stakeStart2 = stakeStart2
                row.stakeEnd1 = stakeEnd1
                row.stakeEnd2 = stakeEnd2
                this.stakeChange(row)
            } else {
                row.stakeStart1 = ''
                row.stakeStart2 = ''
                row.stakeEnd1 = ''
                row.stakeEnd2 = ''
                // row.stakeIsValid = false
            }
        },
        stakeChange(row) {
            const [stakeStart, stakeEnd] = row.stake.split('~')
            const [stakeStart1, stakeStart2] = stakeStart.replace('K', '').split('+')
            const [stakeEnd1, stakeEnd2] = stakeEnd.replace('K', '').split('+')

            const startStake = Number(stakeStart1) * 1000 + Number(stakeStart2)
            const endStake = Number(stakeEnd1) * 1000 + Number(stakeEnd2)
            const currentStartStake = Number(row.stakeStart1) * 1000 + Number(row.stakeStart2)
            const currentEndStake = Number(row.stakeEnd1) * 1000 + Number(row.stakeEnd2)
            
            if (currentStartStake >= startStake && currentEndStake <= endStake) {
                row.stakeIsValid = true
                row.startStakeNo = `K${row.stakeStart1}+${row.stakeStart2}`
                row.endStakeNo = `K${row.stakeEnd1}+${row.stakeEnd2}`
            } else {
                row.stakeIsValid = false
            }
        },
        handleValidate() {
            const valid = this.tableList.every((item, index) => {
                if (!item.highwayCode) {
                    this.$message.error(`养护范围(序号${index + 1}) 公路名称 不能为空！`)
                    return false
                }
                if (!item.scope) {
                    this.$message.error(`养护范围(序号${index + 1}) 范围 不能为空！`)
                    return false
                }
                if (item.scope === 2 && !item.roadSection) {
                    this.$message.error(`养护范围(序号${index + 1}) 路段范围描述 不能为空！`)
                    return false
                }
                
                if (!item.stakeStart1 || !item.stakeStart2 || !item.stakeEnd1 || !item.stakeEnd2) {
                    this.$message.error(`养护范围(序号${index + 1}) 桩号范围 不完整！`)
                    return false
                }
                if (!item.stakeIsValid) {
                    this.$message.error(`养护范围(序号${index + 1}) 桩号范围 不能超出公路全线范围！`)
                    return false
                }
                
                return true
            })
            return valid
        },
        handleAdd() {
            this.tableList.push({
                highwayCode: '',
                highwayName: '',
                scope: '',
                roadSection: '',
                stake: '',
                stakeStart1: '',
                stakeStart2: '',
                stakeEnd1: '',
                stakeEnd2: '',
                stakeIsValid: ''
            })
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.tableList.splice(index, 1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-input__inner, .el-input {
        min-width: auto !important;
    }
    .el-table td {
        padding: 20px 0;
    }
}
.spe-input {
    ::v-deep {
        .el-input__inner {
            padding-right: 50px;
        }
    }
}
.required-start {
    color: #e50834;
    margin-right: 4px;
    font-style: normal;
}
.table-footer {
    background-color: #f6f6f6;
    padding: 8px 20px;
    text-align: right;
    font-size: 14px;
    margin-bottom: 24px;
}
</style>
